<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo" v-if="!showStart">
        <thead>
          <tr>
            <td>编号</td>
            <td>优惠起步价</td>
            <td>优惠百分比</td>
            <td>优惠状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{item.id}}</td>
            <td>{{item.order_amount}}</td>
            <td>{{item.ratio}}</td>
            <td>{{item.is_open|tpye}}</td>
            <td>
              <a @click='sallOpen(item.id,2)'>开启</a>
              <a @click='sallOpen(item.id,1)'>关闭</a>
              <a @click='sallUp(item)'>编辑</a>
              <a @click='sallDel(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="itemInfo" v-if="showStart">
          <div class="formBox">
              <p class="item"><span class="name">优惠起步价 ：</span><input v-model="date.order_amount" class="slong" placeholder="请输入内容"></input></p>
              <p class="item"><span class="name">优惠百分比 ：</span><input v-model="date.ratio" class="slong" placeholder="请输入内容"></input></p>
              <p class="item inputBox"><button @click="submitInput" class="submitInput">确定</button><button @click="empty" class="emptyInput">取消</button></p>
          </div>
      </div> 

    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import VueQuillEditor from 'vue-quill-editor'
import axios from 'axios'
import { Get, Post,Delete,Put} from '@/config/api'
Vue.use(VueQuillEditor)
export default {
  name: 'prcList',
  data() {
    return {
      loading: true,//加载中
      showStart:false,//切换
      tableData: [],//表单数据
      listId:'',
      date:{
        order_amount:'',
        ratio:''
      }
    }
  },
  filters:{
      tpye(vule){
        if(vule=='1'){
          return '关闭'
        }else{
          return '开启'
        }
      }
  },
  mounted() {
    this.getData()
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData() {
      if (this.Check()) {
        let reg=await Get('/order/buy/config',this.$store.state.token)
        console.log(reg)
        this.tableData=reg.data
        this.loading=false
      }
    },
    //编辑广告图
    sallUp(e){
        this.listId=e.id
        this.showStart=true
        this.date.order_amount=e.order_amount
        this.date.ratio=e.ratio
    },

    //删除广告图
    async sallDel(e){
        this.$store.dispatch("loadOpen");
        await Delete('/order/buy/config/'+e,this.$store.state.token).then(function(){
          alert('删除成功')
        })
        this.$store.dispatch("loadClose");
        this.getData()
    },

    //修改活动状态
    async sallOpen(id,val){
        this.$store.dispatch("loadOpen")
        let data
        data={

            "is_open":val,
            "buy_config_id":id
          }
        await Put('/order/buy/config/'+id,this.$store.state.token,data).then(function(res){
          alert('修改成功')
        }).catch(function(err){
          alert(err.date.message)
        })
        this.$store.dispatch("loadClose")
        this.showStart=false
        this.getData()
    },

    //修改活动状态
    async submitInput(){
        this.$store.dispatch("loadOpen")
        let data
        data={
            "buy_config_id":this.listId,
            "order_amount":this.date.order_amount,
            "ratio":this.date.ratio
          }
        await Put('/order/buy/config/'+this.listId,this.$store.state.token,data).then(function(res){
          alert('修改成功')
        }).catch(function(err){
          alert(err.date.message)
        })
        this.$store.dispatch("loadClose")
        this.showStart=false
        this.getData()
    },
    //取消
    empty(){
      this.showStart=false
    }
  }
}

</script>
